<!--  线 + 柱混合图 -->
<template>
	<el-card>
		<template #header>
			<div class="title">
				业绩柱状图
				<el-tooltip effect="dark" content="点击试试下载" placement="bottom">
					<i-ep-download class="download" @click="downloadEchart" />
				</el-tooltip>
			</div>
		</template>

		<div :id="id" :class="className" :style="{ height, width }"></div>
	</el-card>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps({
	id: {
		type: String,
		default: 'barChart'
	},
	className: {
		type: String,
		default: ''
	},
	width: {
		type: String,
		default: '200px',
		required: true
	},
	height: {
		type: String,
		default: '200px',
		required: true
	}
})

const options = {
	grid: {
		left: '2%',
		right: '2%',
		bottom: '10%',
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			crossStyle: {
				color: '#999'
			}
		}
	},
	legend: {
		x: 'center',
		y: 'bottom',
		data: ['收入', '毛利润', '收入增长率', '利润增长率'],
		textStyle: {
			color: '#999'
		}
	},
	xAxis: [
		{
			type: 'category',
			data: ['浙江', '北京', '上海', '广东', '深圳'],
			axisPointer: {
				type: 'shadow'
			}
		}
	],
	yAxis: [
		{
			type: 'value',
			min: 0,
			max: 10000,
			interval: 2000,
			axisLabel: {
				formatter: '{value} '
			}
		},
		{
			type: 'value',
			min: 0,
			max: 100,
			interval: 20,
			axisLabel: {
				formatter: '{value}%'
			}
		}
	],
	series: [
		{
			name: '收入',
			type: 'bar',
			data: [7000, 7100, 7200, 7300, 7400],
			barWidth: 20,
			itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: '#83bff6' },
					{ offset: 0.5, color: '#188df0' },
					{ offset: 1, color: '#188df0' }
				])
			}
		},
		{
			name: '毛利润',
			type: 'bar',
			data: [8000, 8200, 8400, 8600, 8800],
			barWidth: 20,
			itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: '#25d73c' },
					{ offset: 0.5, color: '#1bc23d' },
					{ offset: 1, color: '#179e61' }
				])
			}
		},
		{
			name: '收入增长率',
			type: 'line',
			yAxisIndex: 1,
			data: [60, 65, 70, 75, 80],
			itemStyle: {
				color: '#67C23A'
			}
		},
		{
			name: '利润增长率',
			type: 'line',
			yAxisIndex: 1,
			data: [70, 75, 80, 85, 90],
			itemStyle: {
				color: '#409EFF'
			}
		}
	]
}

const downloadEchart = () => {
	// 获取画布图表地址信息
	const img = new Image()
	img.src = chart.value.getDataURL({
		type: 'png',
		pixelRatio: 1,
		backgroundColor: '#fff'
	})
	// 当图片加载完成后，生成 URL 并下载
	img.onload = () => {
		const canvas = document.createElement('canvas')
		canvas.width = img.width
		canvas.height = img.height
		const ctx = canvas.getContext('2d')
		if (ctx) {
			ctx.drawImage(img, 0, 0, img.width, img.height)
			const link = document.createElement('a')
			link.download = `业绩柱状图.png`
			link.href = canvas.toDataURL('image/png', 0.9)
			document.body.appendChild(link)
			link.click()
			link.remove()
		}
	}
}

const chart = ref<any>('')
onMounted(() => {
	// 图表初始化
	chart.value = markRaw(
		echarts.init(document.getElementById(props.id) as HTMLDivElement)
	)

	chart.value.setOption(options)

	// 大小自适应
	window.addEventListener('resize', () => {
		chart.value.resize()
	})
})

onActivated(() => {
	if (chart.value) {
		chart.value.resize()
	}
})
</script>
<style lang="scss" scoped>
.title {
	display: flex;
	justify-content: space-between;

	.download {
		cursor: pointer;

		&:hover {
			color: #409eff;
		}
	}
}
</style>
